<template>
  <div class="detail">
    <p class="d_p">商品管理 -- 修改商品</p>
    <div class="dis">
      <p>商品名称：</p>
      <!-- <div contenteditable="true">{{}}</div> -->
      <input v-model="detail.name" type="text" />
    </div>
    <div class="dis">
      <p>商品描述：</p>
      <input type="text" v-model="detail.subtitle" />
      <!-- <div contenteditable="true">{{detail.subtitle}}</div> -->
    </div>
    <div class="dis">
      <p>当前状态：</p>
      <input type="text" v-model="detail.status" />

      <!-- <div contenteditable="true">{{detail.status}}</div> -->
    </div>
    <div class="dis">
      <p>所属分类：</p>
      <select placeholder="请选择">
        <option value>请选择一级品类</option>
        <option v-for="item in options" :key="item.value">{{item.label}}</option>
      </select>
    </div>
    <div class="dis">
      <p>商品价格：</p>
      <input type="text" v-model="detail.price" />
      <!-- <div contenteditable="true"> -->
      <!-- {{detail.price}} -->
      <p>元</p>
      <!-- </div> -->
    </div>
    <div class="dis">
      <p>商品库存：</p>
      <input type="text" v-model="detail.stock" />
      <!-- <div contenteditable="true"> -->
      <!-- {{detail.stock}} -->
      <p>件</p>
      <!-- </div> -->
    </div>
    <div class="dis_img">
      <p>商品图片：</p>
      <el-image
        style="width: 100px; height: 100px"
        v-for="(item,index) in images"
        :key="index"
        :src="item"
        fit="['cover']"
      ></el-image>
      <!-- 上传图片 -->
      <el-upload
        method="post"
        enctype="multipart/form-data"
        name="upload_file"
        :data="upload"
        action="/api/product/upload.do"
        :file-list="fileList"
        ref="upload"
        list-type="picture"
        :on-success="getupload"
        :on-remove="getdel"
        :with-credentials="true"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>-->

      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>-->
      <!-- <div class="img">
        <img :src="detail.imageHost+`${detail.mainImage}`" width="98%" height="98%" />
      </div>-->
    </div>
    <div class="dis_rich">
      <p>商品详情：</p>
      <!-- <Richtext></Richtext> -->
      <quill-editor
        class="quill"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      ></quill-editor>
      <!-- <span v-html="detail.detail" contenteditable="true"></span> -->
    </div>
    <div class="dis_box">
      <el-button type="primary" @click="primary" round>提交</el-button>
    </div>
  </div>
</template>

<script>
import { Detail, addDetail } from "../../request/http";
// import Richtext from "../../request/Richtext";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  // components: {
  //   Richtext,
  // },
  data() {
    return {
      detail: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      content: "",
      editorOption: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      upload: {},
      fileList: [],
    };
  },
  components: {
    quillEditor,
  },
  computed: {
    images() {
      var temp = [];
      // console.log(this.detail.subImages);
      if (this.detail.subImages) {
        var arrimg = this.detail.subImages.split(",");
        // console.log(arrimg);
        arrimg.forEach((elem) => {
          if (elem != "null") {
            temp.push("http://img.happymmall.com/" + elem);
          }
        });
        // console.log(temp);
        return temp;
      }
      return temp;
    },
  },
  mounted() {
    let id = this.$route.query.id;
    // console.log(id);
    var obj = {
      productId: id,
    };
    Detail(obj).then((res) => {
      // console.log(res.data.data);
      this.detail = res.data.data;
      this.content = res.data.data.detail;
    });
  },
  methods: {
    //修改
    primary() {
      // console.log(this.detail);
      var obj = {
        categoryId: this.detail.categoryId,
        name: this.detail.name,
        subtitle: this.detail.subtitle,
        subImages: this.detail.subImages,
        detail: this.detail.detail,
        price: this.detail.price,
        stock: this.detail.stock,
        status: this.detail.status,
        id: this.detail.id,
      };
      console.log(obj);
      addDetail(obj).then((res) => {
        console.log(res)
        this.tableData = res.data;
      });
      this.$message('修改成功')
    },
    getupload(res) {
      // console.log(res);

      // console.log(this.sizeForm.subImages)
      this.detail.subImages += "," + res.data.uri;
      var arr = this.detail.subImages.split(",");
      var index = arr.indexOf("null");
      if (index != -1) {
        arr.splice(index, 1);
      }
      this.detail.subImages = arr.join(",");
    },
    //删除图片通过indexOf拿取下标，再让下标去删除图片
    getdel(file) {
      var arr = this.detail.subImages.split(",");
      var index = arr.indexOf(file.response.data.uri);
      arr.splice(index, 1);
      this.detail.subImages = arr.join(",");
    },
    //可清空上传的图片
    getclear() {
      this.$refs.upload.clearFiles();
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(html) {
      // this.content = html.html;
      // console.log(this.content);
         this.detail.detail = this.content

    }, // 内容改变事件

    handleRemove() {
      // console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      // console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/index.scss";
.d_p {
  @include FontOnly(40px);
  @include Mlt(30px, 30px);
}
.dis_img {
  @include Mlt(100px, 10px);
  display: flex;
  p {
    @include FontOnly(15px);
    margin-right: 30px;
    font-weight: 800;
  }
  .img {
    @include Size(85px, 85px);
    border: 1px solid #000;
    background-color: #fff;
    border-radius: 5px;
  }
}
.dis {
  @include Size(100%, 30px);
  @include Mlt(100px, 10px);
  display: flex;
  line-height: 30px;
  cursor: pointer;
  p {
    @include FontOnly(15px);
    margin-right: 30px;
    font-weight: 800;
  }
  input {
    @include Size(50%, 30px);
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    text-indent: 10px;
    position: relative;
    p {
      @include Size(1%, 30px);
      position: absolute;
      right: 0;
      top: 0;
      border-left: 1px solid #999;
    }
  }
}

.el-input {
  width: 50%;
}
.dis_rich {
  // @include Size(100%, 30px);
  @include Mlt(100px, 10px);
  display: -webkit-box;
  // display: flex;
  line-height: 30px;
  cursor: pointer;
}
.dis_rich > p:nth-child(1) {
  font-weight: 800;
}
.dis_box {
  // height: 200px;
  //  @include Size(100%, 40px);
  @include Mlt(100px, 10px);
  display: flex;
  line-height: 30px;
  cursor: pointer;
}
</style>